<template>
    <!-- 实时数据 -->
    <div class="real-time-page">
     <!-- <div v-if="siteLoading" class="loading-wrap"></div>
      <div v-if="noDataState" class="no-data-wrap small">
        <p>暂无数据</p>
      </div>-->
      <div class="water-ranking-table">
        <el-table
          :data="tableData"
          border
          height="100%"
          style="width: 100%">
          <el-table-column
            prop="stationName"
            label="监测点"
            fixed
            :show-overflow-tooltip = "true"
            width="112">
          </el-table-column>
          <el-table-column
            prop="dataTime"
            label="更新时间"
            fixed
            :show-overflow-tooltip = "true"
            width="143">
          </el-table-column>
          <!-- <el-table-column
            prop="state"
            label="状态"
            fixed
            width="82">
            <template slot-scope="scope">
              <span class="water-ranking-span"><i class="sl-icon" :class="setStateClass(scope.row.state)"></i> {{ setStateText(scope.row.state) }} </span>
            </template>
          </el-table-column> -->
          <el-table-column :key="index" v-for="item,index in headcolumn"
            :prop="item.code"
            :width="setWidth(item.projectName)"
            :show-overflow-tooltip = "true"
            :label="item.projectName">
          </el-table-column>
        </el-table>
      </div>
    </div>
</template>

<script>
    export default {
        name: "realTime",
        props:["equipIds"],
        data(){
          return {
            tableData: [],
            headcolumn:[
              {code:"w01010", projectName:"水温"},
              {code:"w01001", projectName:"pH"},
              {code:"w01009", projectName:"溶解氧"},
              {code:"w01003", projectName:"浑浊度"},
              {code:"w01014", projectName:"电导率"},
              {code:"w01019", projectName:"高锰酸盐指数"},
              {code:"w21003", projectName:"氨氮"},
              {code:"w21011", projectName:"总磷"},
              {code:"w21001", projectName:"总氮"},
            ]
          }
        },
        methods:{
          setWidth(str){
            if(str){
              let num = str.length;
              return (num*14+20)>104?(num*14+20):104;
            }
          },
          setStateClass(state){
            let cls = '';
            switch (state) {
              case 'normal':
                cls = 'normal-icon';
                break;
              case 'offline':
                cls = 'offline-icon';
                break;
              case 'over':
                cls = 'over-icon';
                break;
            }
            return cls;
          },
          setStateText(state){
            let text = '';
            switch (state) {
              case 'normal':
                text = '正常';
                break;
              case 'offline':
                text = '离线';
                break;
              case 'over':
                text = '报警';
                break;
            }
            return text;
          },
          getpropertys(item){
            console.info('projects.'+item.projectCode);
            return 'projects.'+item.projectCode+'.value';
          },
          searchcolumn(){
            this.$http.get('/Receiving/queryRowToColRealTimeData',{
              params:{
                mn: this.equipIds.toString(),
                pageNum: 1,
                pageSize : 10000
              }
            }).then((response)=>{
              let dataJson = response.data;
              if(dataJson.code === 0){
                this.tableData = dataJson.content.dataList;
                //this.dataSearch();
              }
            }).catch((error)=>{

            });
          },
          dataSearch(){
            this.$http.get('/waterenvapi/realdatas/map',{
              params:{
                equipIds:this.equipIds.toString()
              }
            }).then((response)=>{
              let dataJson = response.data;
              if(dataJson.code === 0){
                this.tableData = dataJson.content.dataList;
                this.total=dataJson.content.total;
              }
            }).catch((error)=>{
              console.info(error);
            });
          }
        },
        mounted(){
          
        }
    }
</script>

<style scoped lang="less">
.real-time-page{

}
.water-ranking-table{
  height: 322px;
  padding: 8px;
}
.water-ranking-span{
  .sl-icon{
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
  .normal-icon{
    background: #23c467;
  }
  .offline-icon{
    background: #a4afb4;
  }
  .over-icon{
    background: #ff0000;
  }

}
</style>
